<template>
	<el-dialog :close-on-click-modal="false" title="精准选点" center :visible.sync="visible" width="80%" @closed="dialogClose()">
		<div style="max-height: 60vh;overflow-y: auto;">
			<div class="margin-xs padding-bottom-sm text-lg flex justify-start align-center flex-no-wrap" style="border-bottom: 1px solid #ddd;">
				<div>
					共计<span class="text-green">{{total || 0}}</span>个空闲，最多可选<span
							class="text-red">{{can>total?total:can}}</span>个，已选中<span class="text-blue">{{(choosed || []).length}}</span>个
				</div>
				<div>
					<div class="margin-left">
						<el-checkbox v-model="checkAll" @change="changeCheckAll">全选</el-checkbox>
					</div>
				</div>
			</div>
			<div class="flex justify-start align-start flex-wrap">
				<template v-if="viewData.length>0">
					<div v-if="viewData[0].isLeaf" class="flex justify-start align-center flex-wrap">
						<div :class="['d-item', {'choosed': !!choosedSet.has(v1.id)}]" v-for="(v1, v1Idx) in viewData" :key="v1.id" @click="chooseOneItem(v1, v1Idx)">
							<div style="display: table-cell;vertical-align: middle;">
								{{v1.name}}
							</div>
						</div>
					</div>
					<div class="d-p justify-start align-center flex-wrap" v-else v-for="(v1, v1Idx) in viewData" :key="v1.id">
						<div class="flex justify-center align-center flex-no-wrap">
							<div class="d-p-title">
								<div class="d-p-t">
									<div class="text-xxl text-bold text-blue">{{v1.name}}</div>
									<div class="flex justify-end align-center flex-no-wrap">
										<div v-if="!!v1.max" class="margin-left">最多选择<span class="text-red">{{v1.max}}</span>个设备</div>
										<!-- <div class="margin-left">
											<el-checkbox>全选</el-checkbox>
										</div> -->
									</div>
								</div>
							</div>
							<template v-if="(v1.list || []).length>0">
								<div v-if="v1.list[0].isLeaf" class="flex justify-start align-center flex-wrap margin-top-sm">
									<div :class="['d-item', {'choosed': !!choosedSet.has(v2.id)}]" v-for="(v2, v2Idx) in v1.list" :key="v2.id" @click="chooseOneItem(v2, v1Idx, v2Idx)">
										<div style="display: table-cell;vertical-align: middle;">
											{{v2.obj[leafShowType==1?'media_feature':'code'] || (leafShowType==1?'无特点':'')}}
										</div>
									</div>
								</div>
								<div class="d-p justify-start align-center flex-wrap" v-else v-for="(v2, v2Idx) in v1.list" :key="v2.id">
									<div>
										<div class="d-p-title">
											<div class="d-p-t">
												<div class="text-xl text-bold text-green">{{v2.name}}</div>
												<div class="flex justify-end align-center flex-no-wrap">
													<div v-if="!!v2.max" class="margin-left">最多选择<span class="text-red">{{v2.max}}</span>个设备</div>
													<!-- <div class="margin-left">
														<el-checkbox>全选</el-checkbox>
													</div> -->
												</div>
											</div>
										</div>
										<template v-if="(v2.list || []).length>0">
											<div v-if="v2.list[0].isLeaf" class="flex justify-start align-center flex-wrap margin-top-sm">
												<div :class="['d-item', {'choosed': !!choosedSet.has(v3.id)}]" v-for="(v3, v3Idx) in v2.list" :key="v3.id" @click="chooseOneItem(v3, v1Idx, v2Idx, v3Idx)">
													<div style="display: table-cell;vertical-align: middle;">
														{{v3.obj[leafShowType==1?'media_feature':'code'] || (leafShowType==1?'无特点':'')}}
													</div>
												</div>
											</div>
											<div class="d-p justify-start align-center flex-wrap" v-else v-for="(v3, v3Idx) in v2.list" :key="v3.id">
												<div>
													<div class="d-p-title">
														<div class="d-p-t">
															<div class="text-lg text-bold text-orange">{{v3.name}}</div>
															<div class="flex justify-end align-center flex-no-wrap">
																<div v-if="!!v3.max" class="margin-left">最多选择<span class="text-red">{{v3.max}}</span>个设备</div>
																<!-- <div class="margin-left">
																	<el-checkbox>全选</el-checkbox>
																</div> -->
															</div>
														</div>
													</div>
													<template v-if="(v3.list || []).length>0">
														<div v-if="v3.list[0].isLeaf" class="flex justify-start align-center flex-wrap margin-top-sm">
															<div :class="['d-item', {'choosed': !!choosedSet.has(v4.id)}]" v-for="(v4, v4Idx) in v3.list" :key="v4.id" @click="chooseOneItem(v4, v1Idx, v2Idx, v3Idx, v4Idx)">
																<div style="display: table-cell;vertical-align: middle;">
																	{{v4.obj[leafShowType==1?'media_feature':'code'] || (leafShowType==1?'无特点':'')}}
																</div>
															</div>
														</div>
													</template>
												</div>
											</div>
										</template>
									</div>
									
								</div>
							</template>
						</div>
					</div>
				</template>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" @click.native="confirmChoosed">确 定</el-button>
			<el-button @click.native="dialogClose()">取 消</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import common from '@/utils/common.js';
	import {
		isNumber,
		isArray,
		isObject,
		isTrue,
		isFunction,
		generateUUID,
		accMul,
		accAdd,
		accDiv,
		accSub,
		formatDate,
		getTimeSlot
	} from '@/utils/util.js'
	import {
		cloneDeep
	} from 'lodash'
	export default {
		name: 'ExactView',
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		props:{
			exactVisible: {
				type: Boolean,
				default: false
			},
			toExact: {
				type: Array,
				required: true
			},
			can: {
				type: Number,
				required: true
			},
			viewData: {
				type: Array,
				default: () => []
			},
			total: {
				type: Number,
				default: 0
			},
			leafShowType: { // 叶子显示属性，1：特点，2：编号
				type: Number,
				default: 1
			},
		},
		data(){
			return {
				visible: this.exactVisible || false,
				
				choosed:[],
				choosedSet: new Set(),
				
				checkAll: false,
			}
		},
		watch:{
			exactVisible(newValue){
				const that = this;
				that.visible = newValue;
				if(!!newValue){
					that.getExact();
				}
			}
		},
		mounted(){
			
		},
		methods:{
			dialogClose() {
				const that = this;
				that.resetExactList();
				that.visible = false;
				that.$emit('update:exactVisible', false);
			},
			// 精准选点
			getExact() {
				const that = this
				that.toggleChecked()
			},
			// 默认选中
			toggleChecked(){
				const that = this;
				(that.toExact || []).forEach(obj => {
					that.chooseOne({obj:obj}, true, false);
				});
				if(that.choosed.length > that.can) that.checkAll = true;
			},
			// 重置精准选点相关数据
			resetExactList() {
				const that = this
				that.choosed = [];
				that.choosedSet = new Set();
				that.checkAll = false;
			},
			// 触发点击一个
			chooseOneItem(item, idx1, idx2, idx3, idx4){
				const that = this;
				let flag = true;
				let r6Flag = false;
				if(idx1 !== undefined){
					r6Flag = that.viewData[idx1].ruleId == 6;
					if(idx2 !== undefined){
						if(idx3 !== undefined){
							if(idx4 !== undefined){
								const item3 = that.viewData[idx1].list[idx2].list[idx3];
								if((item3.max || 0) > 0){
									let c = 0;
									(item3.list || []).forEach(item => {
										if(that.choosedSet.has(item.obj.id)) c++;
									});
									if(c >= item3.max) flag = false;
								}
							}else{
								const item2 = that.viewData[idx1].list[idx2];
								if((item2.max || 0) > 0){
									let c = 0;
									(item2.list || []).forEach(item => {
										if(that.choosedSet.has(item.obj.id)) c++;
									});
									if(c >= item2.max) flag = false;
								}
							}
						}else {
							const item1 = that.viewData[idx1];
							if((item1.max || 0) > 0){
								let c = 0;
								(item1.list || []).forEach(item => {
									if(that.choosedSet.has(item.obj.id)) c++;
								});
								if(c >= item1.max) flag = false;
							}
						}
					}
				}
				if(!that.choosedSet.has(item.obj.id) && !flag) {
					common.messageError('超出规则限制数量！');
				} else {
					// if(!r6Flag){
					// 	that.chooseOne(item);
					// }else{
					// 	that.chooseOne(that.viewData[idx1].list[0]);
					// 	that.chooseOne(that.viewData[idx1].list[1]);
					// }
					that.chooseOne(item);
				}
			},
			// 选中1个
			chooseOne(item, flag, showError=true){
				const that = this;
				let set = new Set(JSON.parse(JSON.stringify(Array.from(that.choosedSet))));
				(that.choosed || []).forEach(c => {
					set.add(c.id);
				});
				const ownChooseOne = function(item){
					that.choosed.push(item.obj);
					set.add(item.obj.id);
				};
				const ownUnChooseOne = function(item){
					let idxs = [];
					(that.choosed || {}).forEach((c,i) => {
						if(c.id == item.obj.id){
							idxs.push(i);
						}
					});
					if(idxs.length == 1){
						that.choosed.splice(idxs[0], 1);
						set.delete(item.obj.id);
					}
				};
				if(flag === undefined){
					if(!set.has(item.obj.id)){
						if(!!that.validCheck(showError)){
							ownChooseOne(item);
						}
					}else{
						ownUnChooseOne(item);
					}
				}else{
					if(!!flag){
						if(!set.has(item.obj.id)){
							if(!!that.validCheck(showError)){
								ownChooseOne(item);
							}
						}
					}else{
						if(set.has(item.obj.id)){
							ownUnChooseOne(item);
						}
					}
				}
				
				that.choosedSet = set;
			},
			
			validCheck(showError){
				const that = this;
				if((that.choosed || []).length >= that.can){
					if(showError) common.messageError('不允许勾选超出' + that.can + '个设备！')
					return false;
				}
				
				return true;
			},
			
			// 全选
			changeCheckAll(val){
				const that = this;
				const list = JSON.parse(JSON.stringify(that.viewData));
				let leafs = [];
				that.choosed = [];
				that.choosedSet = new Set();
				
				const checkMax = function(max, list){
					if(max > 0) {
						if((list || []).length < max) return true;
						else return false;
					}else {
						return true;
					}
				};
				
				(list || []).forEach(v1 => {
					if(!!v1.isLeaf){
						leafs.push(v1);
					}else{
						let v1Max = v1.max || 0;
						let v1CList = [];
						(v1.list || []).forEach(v2 => {
							if(!!v2.isLeaf){
								if(checkMax(v1Max, v1CList)) {
									v1CList.push(v2);
								} 
							}else{
								let v2Max = v2.max || 0;
								let v2CList = [];
								(v2.list || []).forEach(v3 => {
									if(!!v3.isLeaf){
										if(checkMax(v1Max, v1CList) 
										&& checkMax(v2Max, v2CList)) {
											v1CList.push(v3);
											v2CList.push(v3);
										}
									}else{
										let v3Max = v3.max || 0;
										let v3CList = [];
										(v3.list || []).forEach(v4 => {
											if(!!v4.isLeaf){
												if(checkMax(v1Max, v1CList) 
												&& checkMax(v2Max, v2CList) 
												&& checkMax(v3Max, v3CList)) {
													v1CList.push(v4);
													v2CList.push(v4);
													v3CList.push(v4);
												} 
											}
										});
										leafs = leafs.concat(v3CList || []);
									}
								});
								leafs = leafs.concat(v2CList || []);
							}
						});
						leafs = leafs.concat(v1CList || []);
					}
				});
				
				let lSet = new Set();
				let rList = [];
				leafs.forEach(item => {
					if(!lSet.has(item.obj.id)){
						rList.push(item);
						lSet.add(item.obj.id);
					}
				});
				
				
				rList.forEach(item => {
					that.chooseOne(item, !!val, false);
				});
			},
			
			// 自动选中，提供父组件调用
			checkAutoForFather(viewData, flag, count, removeList){
				const that = this;
				const list = viewData;
				let leafs = [];
				let removeMap = new Map();
				
				const checkMax = function(max, list){
					if(max > 0) {
						if((list || []).length < max) return true;
						else return false;
					}else {
						return true;
					}
				};
				removeList.forEach(d => {
					removeMap.set(''+d.id, d);
				});
				
				
				(list || []).forEach(v1 => {
					if(!!v1.isLeaf){
						leafs.push(v1);
					}else{
						let v1Max = v1.max || 0;
						let v1CList = [];
						(v1.list || []).forEach(v2 => {
							if(!!v2.isLeaf){
								if(checkMax(v1Max, v1CList)) {
									v1CList.push(v2);
								} 
							}else{
								let v2Max = v2.max || 0;
								let v2CList = [];
								(v2.list || []).forEach(v3 => {
									if(!!v3.isLeaf){
										if(checkMax(v1Max, v1CList) 
										&& checkMax(v2Max, v2CList)) {
											v1CList.push(v3);
											v2CList.push(v3);
										}
									}else{
										let v3Max = v3.max || 0;
										let v3CList = [];
										(v3.list || []).forEach(v4 => {
											if(!!v4.isLeaf){
												if(checkMax(v1Max, v1CList) 
												&& checkMax(v2Max, v2CList) 
												&& checkMax(v3Max, v3CList)) {
													v1CList.push(v4);
													v2CList.push(v4);
													v3CList.push(v4);
												} 
											}
										});
										leafs = leafs.concat(v3CList || []);
									}
								});
								leafs = leafs.concat(v2CList || []);
							}
						});
						leafs = leafs.concat(v1CList || []);
					}
				});
				
				let lSet = new Set();
				let rList = [], c = 0;
				leafs.forEach(item => {
					if(!lSet.has(item.obj.id) && c < count && !removeMap.get(''+item.obj.id)){
						rList.push(item);
						lSet.add(item.obj.id);
						c++;
					}
				});
				
				
				return rList.map(item => {
					return [...that.chooseOneForFather(item, !!flag)];
				});
			},
			// 选中1个
			chooseOneForFather(item, flag){
				const that = this;
				let set = new Set();
				let choosed = [];
				const ownChooseOne = function(item){
					choosed.push(item.obj);
					set.add(item.obj.id);
				};
				const ownUnChooseOne = function(item){
					let idxs = [];
					(choosed || []).forEach((c,i) => {
						if(c.id == item.obj.id){
							idxs.push(i);
						}
					});
					if(idxs.length == 1){
						choosed.splice(idxs[0], 1);
						set.delete(item.obj.id);
					}
				};
				if(!!flag){
					if(!set.has(item.obj.id)){
						ownChooseOne(item);
					}
				}else{
					if(set.has(item.obj.id)){
						ownUnChooseOne(item);
					}
				}
				return choosed;
			},
			
			confirmChoosed(){
				const that = this;
				that.$emit('choosed', that.choosed || []);
				that.dialogClose();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.d-p{
		padding: 10px;
		margin: 5px;
		border: 1px solid #ddd;
		border-radius: 5px;
		
		.d-p-title{
			padding: 5px 5px 10px;
			border-bottom: 1px solid #ddd;
			
			.d-p-t{
				width: 100%;
				display: inline-flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;
			}
		}
	}
	.d-item{
		width: 70px;
		height: 70px;
		text-align: center;
		display: table;
		cursor: pointer;
		padding: 5px;
		margin: 10px 5px;
		border: 1px dashed #ddd;
		border-radius: 10px;
		
		&:hover{
			opacity: 0.7;
			background-color: rgba(#cce6ff, 0.8);
		}
		
		&.choosed{
			background-color: rgba(#d7f0db, 0.8);
			border-style: solid;
		}
	}
	
</style>
